<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html oncontextmenu=self.event.returnValue=false onselectstart="return false">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Chat</title>
    <link rel="stylesheet" href="${base!}/layim-v3.7.5/dist/css/layui.css">
    <link rel="stylesheet" href="${base!}/css/menu.css">
    <link rel="stylesheet" href="${base!}/css/contextmenu.css">
    <script src="${base!}/layim-v3.7.5/dist/layui.js" charset="utf-8"></script>
    <script src="${base!}/js/common.js"></script>
    <script src="${base!}/js/swfobject.js"></script>
    <script src="${base!}/js/web_socket.js"></script>
    <script src="${base!}/js/hgUtils.js"></script>
    <script src="${base!}/js/contextmenu.js"></script>
    <script src="${base!}/js/socket.js"></script>
    <style type="text/css">
        #onlineBox{
            float: left;
            margin: 10px;
        }
        /* .layim-chat-text img {
		    max-width: 30% !important;
		    min-width: 30px;
		} */
		#backHome{
			float: left;
   			margin: 10px;
		}
        html,body{overflow-x: hidden;}
		html{background: url("${base!}/img/bg.png") ;background-repeat: no-repeat; background-attachment: fixed; background-size: cover;}
    </style>
</head>
<body >
<div>
<div id="backHome"><a href="/"><<<返回首页</a></div>
<div id="onlineBox">当前在线人数:<span id="onlineCount" style="display:none;">0</span><span><img src="${base!}/img/load.gif" style="width: 15px;" alt="" id="loading"></span>人 </div>
</div>
<script type="text/javascript">
	
	var me = '${Session.me!}';
    var sessionId ='${Session.sessionId!}';
    var username ='${Session.username!}';
    var $ = layui.jquery;
    var base = '${base!}';
    var menu;
    
    layui.extend({
        menu:'js/menu'
    });

    layui.use(['layim'], function (layim) {
   		 var contextmenu = layui.contextmenu ;
        $ = layui.jquery;
        element = layui.element;
        reloadConfig();
        createWebSocket();
        initEventBind();
        //监听发送消息事件
        layim.on('sendMessage', function (res) {
            if (res.to.type == 'friend') {
                res.type = 'friend';
                res.action = TYPE.P2PMSG;
            } else if (res.to.type == 'group') {
                res.type = 'group';
                res.action = TYPE.GROUP_MSG_REQ;
            }
            res = JSON.stringify(res);
            if(socket.readyState!=1){
            	layer.msg("网络不稳定，请稍后重试");
            	return false;
            }
            socket.send(res);
        });

        //监听页面就绪回调
        var targetIndex = 0;
        var targetObj;
       
			//获取好友列表完毕,获取离线消息
		 	layim.on('ready', function(options){
            layim.setFriendStatus(2, 'offline');
            //查询是否有未读消息
            $.ajax({
                url: '${base!}/user/unreadMsgCount',
                success: function (data) {
//	    			  //console.log(data);
                    //获取不到当下消息数量...
//                      //console.log("unReadReq:");
//                      layim.msgbox("新");
//                      //console.log($('.layui-anim .layui-anim-loop .layer-anim-05')[0]);
                    if (data.count > 0) {
                        layim.msgbox(data.count); //数字即为你通过websocket或者Ajax实时获取到的最新消息数量
                    }
                }
            });

            //监听切换在线状态回调
            layim.on('online', function (status) {
                if (status == 'online') {
                    $.get('${base!}/user/online');
                } else {
                    $.get('${base!}/user/hide');
                }
            });

            //监听修改签名回调
            layim.on('sign', function (value) {
                $.get('${base!}/user/updateSign', {'sign': value});
            });

            //每次窗口打开或切换，即更新对方的状态
            layim.on('chatChange', function (res) {
                var type = res.data.type;
                //console.log(res);
                if (type === 'friend') {
                    var id = res.data.id;
                    $.get('${base!}/user/getUser', {'id': id}, function (data) {
                        //console.log(data);
                        if (data.status == 'online') {
                            layim.setChatStatus('<span style="color:#FF5722;">在线</span>'); //模拟标注好友在线状态
                        } else {
                            layim.setChatStatus('<span style="color:#8D9794;">离线</span>'); //模拟标注好友在线状态
                        }
                    });
                } else if (type === 'group') {
                } 
                tabChatChange(res.data);
            });
            $("li[lay-type='history'").on('click', function () {
                	clearOtherGroup();
                	clearOtherFriend();
            });
			
            contextMenuInitFriend();
        	contextMenuInitGroup();
            if($(".layim-list-friend .layim-null").length != 0){
            	//左击
	           /* $(".layim-list-friend .layim-null").click(function(){
	           		layer.prompt({title: '新建分组', formType: 0, maxlength: 7,shade :0,btnAlign: 'c'}, function(value, index){
                   		$.get("user/addGroup",{"groupname":value},function(res){
                   			if(res.code==0){
                   				$('.layim-list-friend').append('<li><h5 layim-event="spread" lay-type="false" data-id="'+res.data.id+'"><i class="layui-icon">&#xe602;</i><span>'+res.data.name+'</span><em>(<cite class="layim-count"> 0</cite>)</em></h5><ul class="layui-layim-list"><li class="layim-null">该分组下暂无好友</li></ul></li>');
                   				layer.msg("新建成功");
                   				//contextMenuInitFriend();
                   			}else{
                   				layer.msg("新建失败");
                   			}
                   			layer.close(index);
                   		});
                   	});
	            }); */
	           //右击
	           $(".layim-list-friend .layim-null").contextMenu({
	               width: 140, // width
	               itemHeight: 30, // 菜单项height
	               bgColor: "#fff", // 背景颜色
	               color: "#333", // 字体颜色
	               fontSize: 15, // 字体大小
	               hoverBgColor: "#009bdd", // hover背景颜色
	               hoverColor: "#fff", // hover背景颜色
	               target: function(ele) { // 当前元素
	               	targetObj = ele.parent();
	               },
	               menu: [
	               	{ // 菜单项
	                       text: "新建分组",
	                       icon: "&#xe654",
	                       callback: function(ele) {
	                       	layer.prompt({title: '新建分组', formType: 0, maxlength: 7,shade :0,btnAlign: 'c'}, function(value, index){
	                       		$.get("user/addGroup",{"groupname":value},function(res){
	                       			if(res.ok==true){
	                       				targetObj.parent().remove();
	                       				$('.layim-list-friend').append('<li><h5 layim-event="spread" lay-type="false" data-id="'+res.data.id+'"><i class="layui-icon">&#xe602;</i><span>'+res.data.name+'</span><em>(<cite class="layim-count"> 0</cite>)</em></h5><ul class="layui-layim-list"><li class="layim-null">该分组下暂无好友</li></ul></li>');
	                       				layer.msg("新建成功");
	                       				contextMenuInitFriend();
	                                	contextMenuInitGroup(); 
	                       				reloadConfig();
	                       			}else{
	                       				layer.msg("新建失败");
	                       			}
	                       			layer.close(index);
	                       		});
	                       	});
	                       }
	                   },{
	                	// 菜单项
	                       text: "添加好友",
	                       icon: "&#xe654",
	                       callback: function(ele) {
	                    	   $(".layim-tool-find").click();
	                       }
	                   }
	               ]
	           });
            }else{
            	
            }
         });

	    //刷新页面,关闭页面等操作时关闭socket连接通道
	    /* window.onbeforeunload = function () {
	        socket.close();
	    } */
    });

    
</script>
</body>
</html>